<template>
    <div class="dashboard-container">
      <!-- 筛选查询 -->
      <el-form :inline="true">
        <el-form-item label="通话时间：">
            <el-select v-model="params.minDuration" clearable>
                <el-option v-for="item in CALL_TIME_LIST" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="本地号码">
          <el-input type="number" placeholder="请输入" v-model="params.localNum" clearable @change="handleSearch"></el-input>
        </el-form-item>
        <el-form-item label="对方号码">
          <el-input type="number" placeholder="请输入" v-model="params.remoteNum" clearable @change="handleSearch"></el-input>
        </el-form-item>
        <el-form-item label="结果">
            <el-select v-model="params.result" placeholder="请选择" clearable @change="handleSearch">
                <el-option
                    v-for="item in CAll_RESULT"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="手机">
          <el-input placeholder="请输入" v-model="params.phone" clearable></el-input>
        </el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form>
  
      <!-- 数据 -->
      <el-table :data="list" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column type="user.realName" label="用户名">
            <template slot-scope="{row}">
              {{   row.user?row.user.nickName: '--'  }}
            </template>
        </el-table-column>
        <el-table-column prop="host.nickName" label="所属代理商"></el-table-column>
        <el-table-column prop="user.phone" label="本地号码"></el-table-column>
        <el-table-column prop="remoteNum" label="对方号码"></el-table-column>
        <el-table-column prop="result" label="通话结果">
            <template slot-scope="{row}">
                <span class="green" v-if="row.result==2">{{ row.resultName }}</span>
                <span class="red" v-if="row.result==1">{{ row.resultName }}</span>
                <span v-if="row.result==0">{{ row.resultName }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="result" label="通话时长">
            <template slot-scope="{row}">
                <span>{{ row.duration/1000 }}</span>s
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="拨打时间"></el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="{row}">
            <el-button type="text" v-if="row.result==2&&row.records.length>0&&row.records[0].mp3File"  @click="play(row)">通话录音</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="padding-top:30px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex+1"
          background
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      <!-- 播放弹窗 -->
      <el-dialog :visible="dialogVisible" title="通话录音" width="500px" @close="dialogVisible=false">
        <div>
          <audio ref="audio1" :src="OSS_BASE_URL+amr" controls="controls"></audio>
        </div>
        <div style="text-align: right;">
          <el-button @click="dialogVisible=false">关闭</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { callGetlist, callGetRecordList } from '@/api/call'
  import { CAll_RESULT, OSS_BASE_URL, CALL_TIME_LIST } from '@/utils/common'
  import { transfromData } from '@/utils/tools'
  import moment from 'moment';
  import BenzAMRRecorder from 'benz-amr-recorder';
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return {
        CAll_RESULT,
        OSS_BASE_URL,
        CALL_TIME_LIST,
        list: [],
        currentPage4: 1,
        params: {
          pageIndex: 0,
          pageCount: 10,
          startTime: '',
          endTime: '',
          localNum: '', //本地号码
          remoteNum: '', //对方号码
          type: '', //通话类型
          userId: '', //用户id
          result: '', //通话结果
          hostId: ''
        },
        total: 0,
        value: '',
        options: [],
        loading: false,
        dialogType: 'create',
        dialogVisible: false,
        provinceList: [],
        cityList: [],
        temp: {},
        rules: {
          loginName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        },
        amr: '',
        info: {}
      }
    },
    mounted(){
      
      this.info = JSON.parse(localStorage.getItem('info'))
      // this.params.hostId = this.info.id
      //通话列表
      this.getList();
    },
    methods:{
      //点击播放
      play(row){
        if(row.records.length>0){
          this.dialogVisible = true;
          this.amr = row.records[0].mp3File
        }else{
          this.$message.error({ message: '暂无录音' })
        }
        
      },
      async getRecord(){
        let data = await callGetRecordList()
      },
      //执行搜索
      handleSearch(){
        this.params.pageIndex = 0;
        this.getList();
      },
      //获取数据列表
      async getList(){
        this.loading = true;
        let data = await callGetlist(this.params)
        this.loading = false;
        this.list = data.data.list.map(item=>{
          item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
          item.resultName = transfromData(CAll_RESULT, item.result)
          return item
        })
        this.total = data.data.totalCount;
      },
      //切换数量
      handleSizeChange(val){
        this.params.pageIndex = 0;
        this.params.pageCount = val;
        this.getList();
      },
      //切换页码
      handleCurrentChange(val){
        this.params.pageIndex = val-1;
        this.getList();
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .green{
    color: green;
  }
  .red{
    color: red;
  }
  </style>
  